<template>
  <div class="common-pagination">
    <div class="pagination-info">
      共{{ total }}条
      <el-select v-model="currentPageSize" class="page-size-select" @change="handlePageSizeChange">
        <el-option
          v-for="item in pageSizes"
          :key="item"
          :label="`${item}条/页`"
          :value="item"
        />
      </el-select>
    </div>
    
    <div class="pagination-buttons">
      <el-button :disabled="currentPage <= 1" @click="handlePrev">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      
      <template v-for="(item, index) in paginationItems" :key="index">
        <span v-if="item === '...'" class="ellipsis">...</span>
        <el-button
          v-else
          :class="{ 'is-active': currentPage === item }"
          @click="handleChangePage(item)"
        >
          {{ item }}
        </el-button>
      </template>
      
      <el-button :disabled="currentPage >= totalPages" @click="handleNext">
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>
    
    <div class="pagination-jumper">
      当前 {{ currentPage }} 页，共 {{ totalPages }} 页
      <span class="jumper-text">跳转至</span>
      <el-input
        v-model="jumpPage"
        class="jumper-input"
        @keyup.enter="handleJumpToPage"
      />
      <span class="jumper-unit">页</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  pageSize: {
    type: Number,
    default: 10
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  }
})

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'size-change', 'current-change'])

// 内部状态
const currentPageSize = ref(props.pageSize)
const jumpPage = ref('')

// 计算总页数
const totalPages = computed(() => {
  return Math.max(1, Math.ceil(props.total / currentPageSize.value))
})

// 计算分页按钮数组
const paginationItems = computed(() => {
  const totalPage = totalPages.value
  const currentPage = props.currentPage
  
  if (totalPage <= 7) {
    // 总页数小于7，全部显示
    return Array.from({ length: totalPage }, (_, i) => i + 1)
  }
  
  // 总页数大于7，需要显示省略号
  const result = []
  
  // 当前页在前3页
  if (currentPage <= 3) {
    for (let i = 1; i <= 5; i++) {
      result.push(i)
    }
    result.push('...')
    result.push(totalPage)
    return result
  }
  
  // 当前页在后3页
  if (currentPage >= totalPage - 2) {
    result.push(1)
    result.push('...')
    for (let i = totalPage - 4; i <= totalPage; i++) {
      result.push(i)
    }
    return result
  }
  
  // 当前页在中间
  result.push(1)
  result.push('...')
  for (let i = currentPage - 1; i <= currentPage + 1; i++) {
    result.push(i)
  }
  result.push('...')
  result.push(totalPage)
  
  return result
})

// 上一页
const handlePrev = () => {
  if (props.currentPage > 1) {
    emit('update:currentPage', props.currentPage - 1)
    emit('current-change', props.currentPage - 1)
  }
}

// 下一页
const handleNext = () => {
  if (props.currentPage < totalPages.value) {
    emit('update:currentPage', props.currentPage + 1)
    emit('current-change', props.currentPage + 1)
  }
}

// 切换页码
const handleChangePage = (page) => {
  if (page !== props.currentPage) {
    emit('update:currentPage', page)
    emit('current-change', page)
  }
}

// 跳转到指定页
const handleJumpToPage = () => {
  if (!jumpPage.value) return
  
  let page = parseInt(jumpPage.value)
  if (isNaN(page)) {
    jumpPage.value = ''
    return
  }
  
  // 确保在有效范围内
  page = Math.max(1, Math.min(page, totalPages.value))
  
  emit('update:currentPage', page)
  emit('current-change', page)
  jumpPage.value = ''
}

// 页面大小变化
const handlePageSizeChange = (val) => {
  emit('update:pageSize', val)
  emit('size-change', val)
  
  // 计算当前是第几条数据
  const currentDataIndex = (props.currentPage - 1) * props.pageSize + 1
  // 计算新的当前页码
  const newCurrentPage = Math.max(1, Math.ceil(currentDataIndex / val))
  
  emit('update:currentPage', newCurrentPage)
  emit('current-change', newCurrentPage)
}

// 监听props变化，同步内部状态
watch(() => props.pageSize, (val) => {
  currentPageSize.value = val
})
</script>

<style lang="scss" scoped>
.common-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 15px;
  padding: 0 15px;
  
  .pagination-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    
    .page-size-select {
      margin-left: 10px;
      width: 100px;
    }
  }
  
  .pagination-buttons {
    display: flex;
    align-items: center;
    
    .el-button {
      margin: 0 5px;
      min-width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border: 1px solid #dcdfe6;
      background-color: #ffffff;
      color: #606266;
      
      &:hover {
        color: var(--primary-color);
        border-color: var(--primary-color);
      }
      
      &.is-active {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: #ffffff;
      }
      
      &:disabled {
        color: #c0c4cc;
        background-color: #f4f4f5;
        border-color: #e4e7ed;
      }
    }
    
    .ellipsis {
      margin: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #606266;
    }
  }
  
  .pagination-jumper {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    
    .jumper-text {
      margin-left: 10px;
    }
    
    .jumper-input {
      width: 50px;
      margin: 0 5px;
      height: 32px;
      text-align: center;
      
      :deep(.el-input__wrapper) {
        padding: 0 5px;
      }
      
      :deep(.el-input__inner) {
        text-align: center;
      }
    }
  }
}
</style> 